<template>
  <div class="app-container">
    <!-- tab页面 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="人员状态" name="first">
        <div v-if="activeName === 'first'">
          <Man />
        </div>
      </el-tab-pane>
      <el-tab-pane label="车辆状态" name="second">
        <div v-if="activeName === 'second'">
          <Car />
        </div>
      </el-tab-pane>
      <el-tab-pane label="班组状态" name="third">
        <div v-if="activeName === 'third'">
          <Group />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 搜索模块 -->
    <div class="search">
      <!-- <el-form :inline="true" :model="formInline">
        <el-form-item label="车牌号">
          <el-input v-model="formInline.name" size="mini" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </div>
</template>

<script>
import Car from './components/car'
import Group from './components/group'
import Man from './components/man'
export default {
  name: 'index',
  components: {
    Car,
    Group,
    Man
  },
  data() {
    return {
      activeName: 'first', // 选项卡下标
      formInline: {
        name: ''
      }
    }
  },
  methods: {
    // 切换标签页面
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 查询数据
    search() {
      this.formInline.offset = 0
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-tabs__nav-scroll{
    float: right;
  }
  .search{
    position: absolute;
    left: 20px;
    top: 104px;
    width: 500px;
    height: 40px;
    z-index: 99;
  }
</style>
